<!DOCTYPE html>
<html>
<head>
    <title>Canvas Plugin Example</title>
    <link rel="stylesheet" href="./leaflet/leaflet.css"/>
    <style>
        #map {
            width: 1200px;
            margin: auto;
            height: 600px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<canvas style="width: 600px;height: 400px" id="mapCanvas"></canvas>
<script src="./leaflet/leaflet-src.js"></script>
<script src="./dist/leaflet.canvasCircle.js"></script>
<script src="./config.js"></script>
<script>
  // 初始化地图
  let newLayers = [];
  for (let i = 0; i < config.imageLayerUrl.length; i++) {
    newLayers.push(L.tileLayer(config.imageLayerUrl[i], {tms: false}));
  }
  var map = new L.map('map', {
    renderer: L.canvas(),
    center: new L.LatLng(34.27, 108.94),
    zoom: 9,
    minZoom: 3,
    maxZoom: 21,
    layers: newLayers,
  });
  var customLayer = L.canvasCircle();
  window.customLayer = customLayer;
  customLayer.addTo(map);
  let newData = [];

  /**
   * 获取随机颜色
   * @returns {string}
   */
  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  for (let i = 0; i < 500000; i++) {
    newData.push({
      id: 'circleId' + i,
      data: L.latLng(
          34.27 + Math.random() * 5,
          108.94 + Math.random() * 5,
      ),
      radius: 500,
      fillColor: getRandomColor(),
      color: getRandomColor(),
      opacity: 1,
      weight: 1,
      sector: false,
      switch: true,
      fillOpacity: 0,
      direction: 0,
      angle: 36,
    });
  }
  // 添加组
  customLayer.addLayers(newData);
  // // 添加单个;
  // customLayer.addLayer('circle_id0', {
  //   data: L.latLng(34.264293, 108.949641),
  //   radius: 1000000,
  //   fillColor: '#0063de',
  //   fillOpacity: 0.5,
  //   weight: 10,
  // });
  // 事件
  customLayer.addOnClickListener(function(e, data) {
    data.bindPopup(data._leaflet_id).openPopup();
    document.body.style.background = data.options.fillColor;
  });
  // customLayer.addOnHoverListener(function(e, data) {
  //   data.bindTooltip(data._leaflet_id).openTooltip();
  // });
  // customLayer.addOnMouseDownListener(function(e, data) {
  // });
  // 修改前的状态
  // setInterval(() => {
  //   let data = [];
  //   for (let i = 0; i < newData.length; i++) {
  //     if (i < 200) {
  //       let coordinates2 = L.latLng(
  //           34.27 + Math.random() * 0.2,
  //           108.94 + Math.random() * 0.2,
  //       );
  //       data.push({id: `circleId${i}`, data: coordinates2});
  //       // 更新经纬度（单个）;
  //       customLayer.setLatLng(`circleId${i}`, coordinates2);
  //     }
  //     // 更新半径
  //     customLayer.setRadius(`circleId${i}`, Math.floor(Math.random() * 500));
  //     // 更新样式
  //     customLayer.setStyle(`circleId${i}`, {
  //       direction: 354 + Math.random() * 10,
  //       angle: 120 + Math.random() * 10,
  //       startAngle: 354 + Math.random() * 10,
  //       endAngle: 120 + Math.random() * 10,
  //       sector: Math.random() < 0.5,
  //       switch: Math.random() < 0.5,
  //     });
  //   }
  //   // 一次修改一批
  //   // customLayer.setLatLngs(data);
  // }, 10 * 100);

  // 修改后的状态
  // setInterval(() => {
  //   let data = [];
  //   for (let i = 0; i < newData.length; i++) {
  //     if (i < 200) {
  //       let coordinates2 = L.latLng(
  //           34.27 + Math.random() * 0.2,
  //           108.94 + Math.random() * 0.2,
  //       );
  //       data.push({id: `circleId${i}`, data: coordinates2});
  //       // 更新经纬度（单个）;
  //       customLayer.setLatLng(`circleId${i}`, coordinates2, false);
  //     }
  //     // 更新半径
  //     customLayer.setRadius(`circleId${i}`, Math.floor(Math.random() * 500), false);
  //     // 更新样式
  //     customLayer.setStyle(`circleId${i}`, {
  //       direction: 354 + Math.random() * 10,
  //       angle: 120 + Math.random() * 10,
  //       startAngle: 354 + Math.random() * 10,
  //       endAngle: 120 + Math.random() * 10,
  //       sector: Math.random() < 0.5,
  //       switch: Math.random() < 0.5,
  //     }, false);
  //   }
  //   // 一次修改一批
  //   // customLayer.setLatLngs(data,false);
  //   customLayer.redraw();
  // }, 10 * 100);

</script>
</body>
</html>
